<template>
    <div>
        <el-card style="margin:10px 0">
            <CategorySelect @getCategoryId="getCategoryId" :show="scene!==0" />
        </el-card>
        <el-card>
            <!-- 将来是有三部分进行切换 -->
            <div v-show="scene==0">
                <!-- 展示spu列表的结构 -->
                <el-button type="primary" icon="el-icon-plus" :disabled="category3Id==''" @click="addSpu">添加spu</el-button>
                <el-table border="" style="margin-top:20px" :data="records">
                    <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
                    <el-table-column label="spu名称" width="width" prop="spuName"></el-table-column>
                    <el-table-column label="spu描述" prop="description"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="{row,$index}">
                            <!-- 这里将来用hintButton封装，带有提示功能 -->
                            <HintButton type="success" icon="el-icon-plus" size="mini" title="添加spu" @click="addSku(row)">
                            </HintButton>
                            <HintButton type="warning" icon="el-icon-edit" size="mini" title="修改apu" @click="updateSpu(row)"></HintButton>
                            <HintButton type="info" icon="el-icon-info" size="mini" title="查看当前spu全部的sku" @click="handler(row)"></HintButton>
                            <el-popconfirm title="这是一段内容确定删除吗？" @onConfirm="deltete(row)">
                                <HintButton type="danger" icon="el-icon-delete" size="mini" title="删除spu" slot="reference"></HintButton>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- @current-change="" -->
                <el-pagination style="text-align:center" :total="total" :current-page="page" :page-sizes="[3,5,10]" :page-size="limit" layout="pager,next,jumper,->,sizes,total" @current-change="getSpuList" @size-change="handleSizeChange">
                </el-pagination>
            </div>

            <SpuForm v-show="scene==1" @changeScene="changeScene" ref="spu" />

            <SkuForm v-show=" scene==2" @changeScene="changeScenes" ref="sku" />
        </el-card>
        <!-- 对话框 -->
        <el-dialog :title="`${spu.spuName}的列表`" :visible.sync="dialogTableVisible" :before-close="close">
            <el-table :data="skuList" border v-loading="loading">
                <el-table-column label="名称" prop="skuName" width="150"></el-table-column>
                <el-table-column label="价格" width="200" prop="price"></el-table-column>
                <el-table-column label="重量" prop="weight">
                </el-table-column>
                <el-table-column label="默认图片" width="150">
                    <template slot-scope="{row,$index}">
                        <img :src="row.skuDefaultImg" alt="" style="width:100px;height:100px">
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
import SkuForm from './SkuForm'
import SpuForm from './SpuForm'
export default {
    name: 'Spu',
    data () {
        return {
            category1Id: '',
            category2Id: '',
            category3Id: '',
            page: 1,   //分页器当前的页数
            limit: 3, //每页展示的数据 
            records: [], //spu列表的数据 代表当前页的数据  一页的数据
            total: 0,  //分页器一共提示数据的条数
            scene: 0,  //0表提示spu列表数据， 1添加spu||修改apu  2添加sku 
            dialogTableVisible: false,// 控制对话框的显示与隐藏
            spu: {},
            skuList: [],
            // 页面加载loading效果,默认展示，等页面加载完毕以后置为true
            loading: true
        }
    },
    methods: {
        // 三级联动的自定义事件，可以把子组件的值回传给父组件
        getCategoryId ({ categoryId, level }) {
            // categoryId  获取一，二，三级id
            if (level == 1) {
                this.category1Id = categoryId
                this.category2Id = ''
                this.category3Id = ''
            } else if (level == 2) {
                this.category2Id = categoryId
                this.category3Id = ''
            } else {
                this.category3Id = categoryId;
                this.getSpuList()
            }
        },
        // 获取spu列表数据的方法
        // 该方法自带形参数pager 
        async getSpuList (pages = 1) {
            this.page = pages
            const { page, limit, category3Id } = this
            let result = await this.$API.spu.reqSpuList(page, limit, category3Id)
            // console.log(result);
            if (result.code == 200) {
                this.records = result.data.records
                this.total = result.data.total
            }
        },
        // 每一页分页展示发生变化的条数
        handleSizeChange (limit) {
            this.limit = this.limit
            this.getSpuList()
        },
        // 添加Spu按钮的回调
        addSpu () {
            this.scene = 1
            // 通过子组件发送请求
            this.$refs.spu.addSpuData(this.category3Id)
        },
        // 修改某一个spu
        updateSpu (row) {
            // 获取子组件Spuform
            // 在父组件中可以通过$refs获取子组件
            // console.log(row);
            this.$refs.spu.initSpuData(row)
            this.scene = 1
        },
        // 子组件点击取消修改scene的回调
        changeScene ({ scene, flag }) {
            this.scene = scene
            // 子组件通知父组件切换场景，需要再次获取spu列表的数据进行展示
            // 切换后，停留在当前页
            // flag是为了区分是添加还是修改
            // 添加保存后默认返回到第一页,修改后默认还是在当前页
            if (flag == '修改') {
                this.getSpuList(this.page)
            } else {
                this.getSpuList()
            }
        },
        async deltete (row) {
            // 删除spu的回调
            let result = await this.$API.spu.reqDeleteSpu(row.id)
            if (result.code == 200) {
                this.$message({ type: 'success', message: "删除spu成功" })
                // 代表spu个数大于1的话停留在当前页 小于1的话返回到上一页
                this.getSpuList(this.records.length > 1 ? this.page : this.page - 1)
            }
        },
        // 添加sku的回调
        addSku (row) {
            // 切换场景为2
            this.scene = 2
            // 父组件调用子组件的方法 ，sku场景页面发送请求获取数据
            this.$refs.sku.getData(this.category1Id, this.category2Id, row)
        },
        // 通知父组件修改场景
        changeScenes (scene) {
            this.scene = scene
        },
        // 查看sku按钮的回调
        async handler (spu) {
            // 点击按钮,对话框显示
            this.dialogTableVisible = true
            this.spu = spu
            this.loading = true
            // 获取skp列表的数据进行展示
            let result = await this.$API.spu.reqSkuList(spu.id)
            if (result.code == 200) {
                this.skuList = result.data
                // loading隐藏
                this.loading = false
            }
        },
        close (done) {
            // 关闭对话框的回调
            // 需要把咱们的loading效果置为真
            this.loading = true
            // 关闭后，将spuList的值置空，避免下一次打开其他的spu 会有短暂时间显示上一次的内容
            this.skuList = []
            // 手动关闭对话框
            done()
        }
    },
    components: { SpuForm, SkuForm }
}
</script>

<style>
</style>